<!DOCTYPE html>
<html>
    <head>
        <title>个人中心</title>
        <#include "fsoft-common.ftl" />
        <link rel="stylesheet" href="${request.contextPath}/plugins/store/main.css">
    </head>
    <body class="bg-white">
        <#include "fsoft-store/main-store-header.ftl" />
        <#include "fsoft-store/main-store-logo-search.ftl" />
        <div class="content content-nav-base shopcart-content shopcart-content1">
            <div class="main-nav">
                <div class="inner-cont0">
                    <div class="inner-cont1 w1200">
                        <div class="inner-cont2" style="padding-left:40px">
                            <a href="${request.contextPath}/index" class="active">
                                首页
                            </a>
                            <a href="${request.contextPath}/index">
                                可申购商品
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cart w1200">
                <div class="muen-box">
                    <div class="muen">
                        <a class="title" href="${request.contextPath}/shop-car/index/main_order">我的订单</a>
                        <a class="title" href="${request.contextPath}/shop-car/index/main_userInfo">个人中心</a>
                        <a class="active title">安全中心</a>
                    </div>
                </div>
                <div class="w1200" style="height:100%">
                    <div style="padding-left:160px;height:100%">
                        <div class="active sub-title">安全中心</div>
                        <#--  安全中心  -->
                        <div class="sercurity-box">
                            
                                <div class="layui-tab">
                                    <ul class="layui-tab-title">
                                        <li lay-id="1" class="layui-this">密码修改</li>
                                        <li lay-id="2">动态验证码修改</li>
                                    </ul>
                                    <div class="layui-tab-content">
                                        <div class="layui-tab-item layui-show">
                                            <form class="layui-form" action="" lay-filter="security">
                                                <div class="layui-form-item layui-form-text">
                                                    <label class="layui-form-label">旧密码：</label>
                                                    <div class="layui-input-block">
                                                    <input type="text" name="oldPassword" lay-verify="title" autocomplete="off" placeholder="请输入旧密码" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item layui-form-text">
                                                    <label class="layui-form-label">新密码：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="newPassword" lay-verify="title" autocomplete="off" placeholder="请输新密码" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item layui-form-text">
                                                    <label class="layui-form-label">确认密码：</label>
                                                    <div class="layui-input-block">
                                                        <input type="text" name="confirmPassword" lay-verify="title" autocomplete="off" placeholder="请输确认密码：" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item">
                                                    <div class="layui-input-block">
                                                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1">立即提交</button>
                                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="layui-tab-item">
                                            <form class="layui-form" action="" lay-filter="security-phone">
                                                <div class="layui-form-item layui-form-text">
                                                    <label class="layui-form-label">手机号：</label>
                                                    <div class="layui-input-block">
                                                    <input type="text" name="phone" lay-verify="title" autocomplete="off" placeholder="请输入手机号" class="layui-input">
                                                    </div>
                                                </div>
                                                <div class="layui-form-item layui-form-text">
                                                    <label class="layui-form-label">验证码：</label>
                                                    <div class="layui-input-inline">
                                                        <input type="text" name="code" lay-verify="title" autocomplete="off" placeholder="请输入验证码" class="layui-input">
                                                        
                                                    </div>
                                                    <button type="button" class="layui-btn layui-btn-normal" lay-filter="sendCode" id="sendCode">发送验证码</button>
                                                </div>
                                                <div class="layui-form-item">
                                                    <div class="layui-input-block">
                                                    <button type="submit" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="security-phone-submit">立即提交</button>
                                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                                    </div>
                                                </div>
                                            </form>
                                            
                                        </div>
                                    </div>
                                    
                                </div>
                                
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <#include "fsoft-common-foot.ftl" />
        <script type="text/javascript" src="${request.contextPath}/static/fsoft-web/index/index.js?v=202104"></script>
        <script type="text/javascript" src="${request.contextPath}/static/fsoft-store/shopcar/main_confirm.js?v=202104">
        </script>
        <script type="text/javascript">
            layui.use(['fsoft','laypage','form','element','layer'], function() {
                var $ = layui.$
                    , laypage = layui.laypage
                    , form = layui.form
                    , element = layui.element
                    , layer = layui.layer
                    , fsoft = layui.fsoft;
                <#--  提交密码  -->
                form.on('submit(demo1)', function(data){
                    $.post(layui.cache['contentPath'] + '/dict/findClassItem', data.field, function (data) {
                        if (data.code == 0) {
                            layer.msg('提交成功！');
                        }else{
                            layer.msg(data.msg)
                        }
                    });
                    return false;
                });
                <#--  验证码提交  -->
                form.on('submit(security-phone-submit)', function(data){
                    $.post(layui.cache['contentPath'] + '/dict/findClassItem', data.field, function (data) {
                        if (data.code == 0) {
                            layer.msg('提交成功！');
                        }else{
                            layer.msg(data.msg)
                        }
                    });
                    return false;
                });

                <#--  发送验证码  -->
                var time = 60;
                var isSendCode = false;
                var getRandom = function() {
                    if (time === 0) {
                        time = 60;
                        $("#sendCode").text('重新发送验证码')
                        isSendCode = true;
                        return;
                    } else {
                        time--;
                        $("#sendCode").text(time + "s")
                    }
                    setTimeout(function () {
                        getRandom();
                    }, 1000);
                }
                $("#sendCode").click(function(){
                    var data = form.val("security-phone");
                    if(data.phone == ''){
                        layer.msg('手机号码不能为空');
                        return false;
                    }else{
                        getRandom()
                        $.post(layui.cache['contentPath'] + '/dict/findClassItem', {phone:data.phone}, function (data) {
                            if (data.code == 0) {
                                layer.msg('发送验证码成功！');
                            }else{
                                layer.msg(data.msg)
                            }
                        });
                    }
                });
  
                

                
            });
        </script>
        <style>
            body{
                height:100%
            }
            .shopcart-content{
                background: #f5f5f5;
            }
            .shopcart-content1 .cart{
                    position: relative;
                    padding-bottom:0;
                     height:calc(100% - 65px)
            }
            .muen-box{
                 width:110px; 
                padding:10px 20px;
                position: absolute;
                left:0;
                background:#fff;
                 height:calc(100% - 20px)
            }
            .muen{
                padding:0 20px
            }
            .muen a{
                padding-bottom:10px;
                display:block
            }
            .muen .title{
                font-weight: bold;
                padding-bottom:10px
            }

            .active{
                color:#1E9FFF
            }
            .sub-title{
                background:#fff;
                padding:20px;
                margin-bottom:10px;
                margin-top:10px
            }
            .orderList-box{
                 background:#fff;
                 height:calc(100% - 60px)
            }
            .shopcart-content1{
                height:calc(100% - 130px)
            }
            .shopcart-content1 .th-price{width: 100px; }
            .shopcart-content1 .th-amount{width: 200px; }
            .shopcart-content1 .th-sum{width: 100px;}
            .shopcart-content1 .th-op{width: 160px;}

            .sercurity-box{
                background: #fff; 
                padding:20px
            }
            .orderList-box body{
                background:transparent !important
            }

        </style>
    </body>

</html>